<template>
	<view>
		<view class="order-nav" :style="{top:BarTop + 'px',height:BarHeight + 'px',lineHeight:BarHeight + 'px'}">
			<image src="https://admin.cqycgyl.com/uploads/20250913/bf0a51ba1b105dfe01cd89763962961e.png" mode=""
				class="order-nav-img" @click="backNav"></image>
		</view>
		<view class="checkcode-container">
			<view class="center-container">
				<view class="center-content">
					<view class="big-title">邀请码验证</view>
					<view class="input-wrapper">
						<input class="invite-input-center" type="text" placeholder="请输入邀请码" v-model="inviteCode"
							placeholder-style="color:#8a8a8a;font-size:32rpx;text-align:center;font-weight:300;" style="-webkit-text-fill-color: #8a8a8a; text-align: center;"
							maxlength="20" />
					</view>
					<button class="confirm-btn-center" :class="{ disabled: !inviteCode }" @click="onConfirm">
						<text class="btn-text">提交</text>
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inviteCode: '',
				BarTop: '',
				BarHeight: '',
			}
		},
		onLoad() {
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.BarTop = menuButtonInfo.top;
			this.BarHeight = menuButtonInfo.height;
		},
		methods: {
			backNav() {
				uni.switchTab({
					url: '../../pages/my/index'
				})
			},
			onConfirm() {
				this.$u.api.recommend.checkCode({
					code: this.inviteCode
				}).then(res => {
					if (res.code == 1) {
						uni.setStorageSync('invite_code', this.inviteCode);
						uni.navigateTo({
							url: '/pages/my/business'
						})
					} else {
						this.$u.toast(res.msg);
					}
				})
			}
		}
	}
</script>

<style scoped>
	.order-nav {
		width: 100%;
		text-align: center;
		position: fixed;
		z-index: 999;
		font-weight: 400;
		font-size: 36rpx;
		color: #202020;
	}

	.order-nav-img {
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		left: 20rpx;
		padding: 15rpx 15rpx 15rpx 10rpx;
		z-index: 999;
	}

	.nav-sp {
		position: absolute;
		width: 100%;
		left: 0rpx;
		text-align: center;
	}

	.checkcode-container {
		min-height: 100vh;
		background: url('https://admin.cqycgyl.com/uploads/20250913/021fe576b1247c4c1f5b56cd7af7d774.png') no-repeat center center;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		padding: 30rpx;
		position: relative;
		overflow: hidden;
	}




	.center-container {
		display: flex;
		justify-content: center;
		align-items: flex-end;
		height: 90vh;
	}

	.center-content {
		width: 92.8%;
		background: #FFF1E8;
		border-radius: 24rpx;
		box-shadow: 0 30rpx 80rpx rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 215, 0, 0.1);
		position: relative;
		margin: 0px auto;
	}

	@keyframes logoGlow {
		0% {
			opacity: 0.3;
			transform: scale(1);
		}

		100% {
			opacity: 0.7;
			transform: scale(1.05);
		}
	}

	.logo-text {
		color: #1a1a1a;
		font-size: 36rpx;
		font-weight: 700;
		letter-spacing: 2rpx;
	}

	.big-title {
		font-size: 36rpx;
		color: #333333;
		font-weight: Bold;
		text-align: center;
		margin: 60rpx 0rpx;
	}

	.subtitle {
		font-size: 28rpx;
		color: #cccccc;
		text-align: center;
		margin-bottom: 80rpx;
		font-weight: 300;
		letter-spacing: 2rpx;
	}

	.input-wrapper {
		position: relative;
		margin-bottom: 50rpx;
	}

	.invite-input-center {
		width: 570rpx;
		height: 90rpx;
		background: #FFF1E8;
		border-radius: 24rpx;
		border: 2rpx solid #F6BF59;
		margin: 0px auto;
	}

	/* 添加Webkit前缀 */
	.invite-input-center ::-webkit-input-placeholder {
		color: #8a8a8a;
		font-size: 32rpx;
		text-align: center;
		font-weight: 300;
	}

	@keyframes lineGlow {

		0%,
		100% {
			opacity: 0.6;
		}

		50% {
			opacity: 1;
		}
	}

	.confirm-btn-center {
		width: 570rpx;
		height: 90rpx;
		margin: 0px auto;
		margin: 50rpx auto 60rpx auto;
		background: linear-gradient(90deg, #FF9823 0%, #F24040 100%);
		border-radius: 46rpx
	}

	.btn-text {
		width: 64rpx;
		height: 44rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: right;
		font-style: normal;
		text-transform: none;
	}

	.confirm-btn-center:not(.disabled):hover::before {
		opacity: 1;
	}


	@keyframes float {

		0%,
		100% {
			transform: translateY(0px) scale(1);
			opacity: 0.3;
		}

		50% {
			transform: translateY(-8px) scale(1.1);
			opacity: 0.6;
		}
	}

	/* 响应式优化 */
	@media (max-width: 750rpx) {
		.center-content {
			padding: 60rpx 40rpx;
		}

		.big-title {
			font-size: 40rpx;
		}

		.subtitle {
			font-size: 26rpx;
		}
	}
</style>